<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" href="../css/mui.min.css" />
		<link rel="stylesheet" href="../css/loading.css" />
		<style type="text/css">
			[v-cloak] {
				display: none !important;
			}
			
			.mui-bar {
				background-color: #e51c23;
			}
			
			.mui-title {
				color: #fff;
			}
			
			a {
				color: #fff;
			}
			
			.mui-card-footer, .mui-card-header {
				font-size: 14px;
			}
			
			.mui-card-content-inner span {
				color: #3f51b5;
			}
			
			.mui-table-view-cell {
				display: inline-block;
			}
			
			.mui-card-footer span {
				font-size: 16px;
			}
			
			.mui-table-view .mui-media-object {
				line-height: 50px;
				max-width: 55px;
				height: 50px;
				border-radius: 5px;
			}
			
			.type-list .mui-col-xs-12 {
				text-align: center;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			
			.mui-table-view-cell:after {
				background: none;
			}
		</style>
	</head>

	<body>
		<div id="Loading">
			<div class="loader-inner ball-beat">
				<div></div>
				<div></div>
				<div></div>
			</div>
		</div>
		<div id="peolpleinfo" v-cloak>
			<header class="mui-bar mui-bar-nav">
				<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
				<h1 class="mui-title">设置群聊</h1>
			</header>

			<div class="mui-content">
				<div class="mui-input-row" style="background: #fff; margin-bottom: 10px;">
					<div class="mui-table-view type-list">
						<div class="mui-row">
							<div class="mui-table-view-cell mui-media mui-col-xs-3" style="float: left;" v-for="item in items.users">
								<img class="" style="width: 50px; height: 50px; border-radius: 5%;" src="../images/qq.png">
								<p class="mui-col-xs-12">
									{{item.name}}
								</p>
							</div>

							<div class="mui-table-view-cell mui-media mui-col-xs-3" style="float: left;" @click="addGroupMembers(items,'0')">
								<img style="width: 50px; height: 50px; border-radius: 5%;" src="../images/people-add.png">
								<p class="mui-col-xs-12" style="visibility: hidden;">
									xxxx
								</p>
							</div>
							<div class="mui-table-view-cell mui-media mui-col-xs-3" v-show="grpsid == loginid" @click="reduceGroupMembers(items,grpsid)" style="float: left;" id="btnRelease">
								<!--<div class="mui-table-view-cell mui-media mui-col-xs-3"  @click="reduceGroupMembers(items,'1')" style="float: left;" id="btnRelease">-->
								<img style="width: 50px; height: 50px; border-radius: 5%;" src="../images/people-reduce.png">
								<p class="mui-col-xs-12" style="visibility: hidden;">
									xxxx
								</p>
							</div>
							<!--<div class="mui-table-view-cell mui-media mui-col-xs-3" style="float: left;" id="btnReduce" v-show="items.creator == loginuserid">
								<img style="width: 50px; height: 50px; border-radius: 5%;" src="../images/people-reduce.png">
								<p class="mui-col-xs-12" style="visibility: hidden;">
									xxxx
								</p>
							</div>-->
						</div>
					</div>
				</div>
			</div>
			<div class="mui-input-row" style="background: #fff; margin-bottom: 10px;">
				<div class="mui-card-content mui-input-group">
					<div class="mui-input-row">
						<label>群名称</label>
						<input type="text" :value="items.name" readonly="readonly" @click="renameGroup(items.name)">
					</div>
				</div>
			</div>
			<h5 class="mui-content-padded">
				<span class="mui-btn mui-btn-danger mui-btn-block" @click="removeGroup()">退出群聊</span>
			</h5>
		</div>
	</body>

</html>
<script type="text/javascript" src="../js/mui.min.js"></script>
<script type="text/javascript" src="../js/jquery-2.1.0.js"></script>
<script type="text/javascript" src="../js/config.js"></script>
<script type="text/javascript" src="../js/common.js"></script>
<script type="text/javascript" src="../js/localStorage.js"></script>
<script type="text/javascript" src="../js/vue.min.js"></script>
<script type="text/javascript">
	mui.init();
	var peoplesvm;
	var _membersobj; //群聊人员对象
	var grpsid; //群主(不为空则是群组，为空则是群成员)
	var groupsid; //群聊id

	var loginid = localStorageFunc.get('token').userId;

	mui.plusReady(function() {

		var self = plus.webview.currentWebview();
		var typeId = self.userid;

		initDom();
		initChatData(typeId);

		//	监听更新群聊列表
		window.addEventListener('refreshChat', function(e) {
			initChatData(e.detail);
		});
	});

	function initChatData(groupid) {
		ctdj.group.getGroup(function(r) {
			if(r.success) {
				$.each(r.result, function(index, item) {
					if(groupid == item.id) {
						peoplesvm.items = item;
						peoplesvm.grpsid = item.owner,
							peoplesvm.groupsid = groupid
					}
				});
			}

			if($("#Loading").length > 0) {
				setTimeout(function() {
					document.body.removeChild(document.getElementById('Loading'));
				}, 200)
			}

		});
	}

	function initDom() {
		peoplesvm = new Vue({
			el: "#peolpleinfo",
			data: {
				items: [],
				grpsid: grpsid,
				loginid: loginid
			},
			methods: {

				//	添加成员
				addGroupMembers: function(item, type) {
					console.log('item='+ JSON.stringify(item));
					console.log(type);
					mui.openWindow({
						url: '/html/organize-groups-addpeople.html',
						id: 'organize-groups-addpeople',
						createNew: false,
						extras: {
							'usersinfo': item,
							'handletype': type
						},
						show: {
							autoShow: true,
							aniShow: 'slide-in-right',
							duration: 300
						},
						waiting: {
							autoShow: false,
							title: '正在加载...'
						}
					})
				},

				//	删除成员(群主)
				reduceGroupMembers: function(item, groupowerid) {
					mui.openWindow({
						url: '/html/organize-groups-removepeople.html',
						id: 'organize-groups-removepeople',
						createNew: false,
						extras: {
							'usersinfo': item,
							'groupowerid': groupowerid
						},
						show: {
							autoShow: true,
							aniShow: 'slide-in-right',
							duration: 300
						},
						waiting: {
							autoShow: false,
							title: '正在加载...'
						}
					})
				},

				//	修改群名称
				renameGroup: function(name) {
					var groupsid = this.items.id;
					mui.prompt('是否修改群组名称', name, '友情提示', '', function(e) {
						if(e.index == 1) {
							var groupname = e.value;
							if(groupname == '') {
								mui.toast('请输入群名称');
								return;
							}

							ctdj.group.renameGroup(groupsid, groupname, function(r) {
								if(r.success) {
									peoplesvm.items.name = groupname;

									//	修改群聊列表名称
									var groupschats = plus.webview.getWebviewById('organize-groups');
									if(groupschats) {
										mui.fire(groupschats, 'refreshChat');
									}

									//	修改最近会话群聊名称
									var chatPage = plus.webview.getWebviewById('im-chat');
									if(chatPage) {
										mui.fire(chatPage, 'titleUpdate', groupname);
									}

									//	更新最近会话群聊名称
									var updateNameChatPage = plus.webview.getWebviewById('/html/sub-message.html');
									if(updateNameChatPage) {
										var updateObj = {
											groupsid: groupsid,
											groupsname: groupname
										}
										mui.fire(updateNameChatPage, 'updateNameRectentMsg', updateObj);
									}

								}
							});

						}
					}, 'div');
				},

				// 退出群聊
				removeGroup: function() {
					var userids = new Array();
					userids.push(this.loginuserid);
					var groupsid = this.items.id;
					//console.log(groupsid);
					mui.confirm('此操作不可恢复，请确认！', '友情提示', ['取消', '确定'], function(e) {
						if(e.index == 1) {
							ctdj.group.exitGroup(groupsid, function(r) {
								if(r.success) {
									var groupschats = plus.webview.getWebviewById('organize-groups');
									if(groupschats) {
										mui.fire(groupschats, 'refreshChat');
									}

									var delChatPage = plus.webview.getWebviewById('/html/sub-message.html');
									if(delChatPage) {
										mui.fire(delChatPage, 'delExitRectentMsg', groupsid);
									}

									mui.back();
								}
							});
						}
					}, 'div');
				}
			}
		})

	}
</script>